<template>
  <div class="c1">
    <el-header class="min_width">
      <nav-bar></nav-bar>
      <div class="banner">
        <img src="../assets/img/a6ce035508a48ec9448266bf28ac9d0.png" alt="" style="width: 100%"/>
      </div>
    </el-header>
    <img src="../assets/img/blili8.png" class="img1">
    <div class="demo-type">

      <el-avatar :size="65" src="https://empty">
        <img @click="url1()" :src="userImgsrc"/>
      </el-avatar>
      <span style="position: absolute;top: 0%;left: 110%;font-size: 30px;font-weight: bold;color: white">{{
          userNickname
        }}</span><br>
      <span style="position: absolute;top: 60%;left: 110%;font-weight: bold;color: white">{{ userSuggest }}</span>
    </div>
    <el-container>
      <el-header class="h1">
        <el-menu :default-active="activeIndex" class="el-menu-demo" style="margin-left: -2.2%;" mode="horizontal"
                 @select="handleSelect">
          <router-link to="/spacehome" style="text-decoration: none;">
            <el-menu-item index="1">
              <i class="el-icon-s-home"></i>
              首页
            </el-menu-item>
          </router-link>
          <router-link to="/spacevideo" style="text-decoration: none">
            <el-menu-item index="3">
              <i class="el-icon-s-platform"></i>
              视频
            </el-menu-item>
          </router-link>
          <router-link to="/spacecollect" style="text-decoration: none">
            <el-menu-item index="4">
              <i class="el-icon-s-claim"></i>
              下架视频
            </el-menu-item>
          </router-link>
          <router-link to="/fansquery" style="text-decoration: none;margin-left: 40%;">
            <span>关注数{{ attention }}</span>
          </router-link>
          |
          <router-link to="/fansBean" style="text-decoration: none;">
              <span>
                粉丝数{{ fans }}
              </span>
          </router-link>
          |
          <span>播放量{{ videoIsreprintsum }}</span> |
          <span>点赞数{{easynum}}</span>
        </el-menu>
      </el-header>
      <el-main class="m1">
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {attentionNum, fansNum} from "../api/fans/fans";
import {VideoIsreprintSum} from "../api/video/video";
import {EasyNum} from "../api/videos/videos";


export default {
  name: "personal",
  data() {
    return {
      activeIndex: '1',
      userImgsrc: '',
      userNickname: '',
      userSuggest: '',
      fans: '',
      attention: '', //关注
      videoIsreprintsum: 0,
      easynum: 0,
    }
  }, created() {
    var user = JSON.parse(sessionStorage.getItem('user'));
    if (user) {
      this.userImgsrc = user.userImgsrc;
      this.userNickname = user.userNickname;
      this.userSuggest = user.userSuggest;
      this.fansattentionNum();
      this.fansfansNum();
      this.videoIsreprintSum();
      this.easyNum();
    } else {
      this.$router.push("/home")
    }
  }, methods: {
    /**
     * 查询用户总视频播放量
     */
    videoIsreprintSum() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      VideoIsreprintSum(userId).then(result => {
        this.videoIsreprintsum = result.data;
      })
    },
    /**
     * 用户关注人数
     */
    fansattentionNum() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      if (userId != null && userId != '') {
        attentionNum(userId).then(result => {
          this.attention = result.data;
        })
      } else {
        console.log(this.$message.error("用户值为空"))
      }
    },
    fansfansNum() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      if (userId != null && userId != '') {
        fansNum(userId).then(result => {
          this.fans = result.data;
        })
      } else {
        console.log(this.$message.error("用户值为空"))
      }
    },
    /**
     * 点赞数
     */
    easyNum() {
      let user = JSON.parse(sessionStorage.getItem('user'));
      let userId = user.userId;
      if (user != null) {
        EasyNum(userId).then(result => {
          console.log(result);
          this.easynum=result.data;
        })
      }
    },
    /**
     * @param key
     * @param keyPath
     */
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    url1() {
      var th = this;
      if (th.userImgsrc != '' && th.userImgsrc != null) {
        th.$router.push("/head")
      } else {
        console.log("请先登良")
      }
    }
  }
}
</script>

<style scoped>
.h1 {
  border: 1px solid darkgray;
  position: absolute;
  top: 37.5%;
  left: 10%;
  width: 78.7%;
  border-radius: 5px;
}

.m1 {
  border: 1px solid darkgray;
  position: absolute;
  top: 45%;
  left: 10%;
  width: 78.6%;
  height: 55%;
  border-radius: 5px;
}

.img1 {
  position: absolute;
  bottom: 62.7%;
  left: 10%;
  width: 1100px;
}

.demo-type {
  position: absolute;
  bottom: 64%;
  left: 12%;
}

.banner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 9.5vw;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
}
</style>
